<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>登陆</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .box {
            width: 100%;
            height: 100%;
            /*//background-color: rgb(54, 65, 80);*/
            overflow: hidden;
            background-image: url("https://www.wuxf.cn/upload/2019/6/你的名字-2fdcafc6078f4c39b1a4759871cec3c6.jpg");
            background-size: 100% 100%;
        }

        .center {
            width: 400px;
            height: 450px;
            margin: 110px auto;
            overflow: hidden;
        }
        .center > p {
            color: #fffab7;
            font-size: 60px;
            text-align: center;
            margin-bottom: 50px;
        }

        .centerDiv {
            width: 100%;
            height: 300px;
            background-color: rgba(253, 251, 255, 0);
            overflow: hidden;
        }

        .centerDiv > p {
            font-size: 20px;
            color: rgb(255, 153, 140);
            text-align: center;
            margin-top: 30px;
            margin-bottom: 20px;
        }

        .centerDiv > input {
            width: 85%;
            height: 40px;
            line-height: 40px;
            margin-bottom: 15px;
            margin-left: 7.5%;
            background-color: rgba(253, 251, 255,0);
            border: 1px solid rgb(12, 12, 11);
            text-indent: 10px;
        }



        .centerDiv > input::-webkit-input-placeholder {
            text-indent: 10px;
        }

        .btn1 {
            width: 85%;
            height: 40px;
            line-height: 40px;
            margin-left: 7.5%;
            color: #fff;
            background-color: #132fff;
            border: #32b64f;
            font-size: 17px;
            margin-top: 15px;
            cursor: pointer;
        }

        .btn1:hover {
            background-color: rgb(59, 156, 150);
            border: rgb(59, 156, 150);
        }
    </style>
</head>

<body>
<div class="box">
    <div class="center">
        <p>堇夏年华</p>
        <div class="centerDiv">
            <p>你若不离不弃，我必生死相依</p><br>
            <input type="text" placeholder="请输入用户名" class="username"/>
            <input type="password" placeholder="请输入密码" class="passWord"/>
            <button class="btn1">登录</button>

        </div>
    </div>
</div>

<script type="text/javascript">


    $('.btn1').click(function () {
        var username = $('.username').val();
        var password = $('.passWord').val();
        console.log(username);
        console.log(password);
        $.ajax({
            type: 'POST',
            url: '/api/login',
            data: {"username": username, "password": password},
            dataType: 'json',
            success: function (data) {
                console.log(data);
                if (data.data == 1) {
                    document.cookie = "yhm=" + data.msg;
                     //window.location.href="qdst.html";
                     window.location.href="wuxf.cn";
                    // alert('登录成功');
                } else {
                    alert('账号密码错误');
                }
            },
            error: function () {
                alert('登录失败');
            }
        })
    })

</script>
</body>
</html>